FlyTalk.views.NotificationView = Ext.extend(Ext.Panel, {

	scroll: true,
    initComponent: function () {
		
    	this.backButton = new Ext.Button({
			text: 'Back',
			ui: 'back',
			handler: this.backButtonTap,
			scope: this
		});
    	
		this.toolbar = new Ext.Toolbar({
			title: 'Notifications',
			doc: 'top',
			layout: 'hbox',
			items: [
			    this.backButton,
				{xtype: 'spacer'},
			]
		});
		
		/*
		// back button on toolbar
		this.noteButton = new Ext.Button({
			text: 'Close Notifications',
			ui: 'light',
			dock: 'bottom',
			handler: this.noteButtonTap,
			//badgeText: 3,
			align: 'stretch',
			width: 320,
			scope: this
		});*/
		
		this.noteButton = new Ext.Button({
			html: "Notifications",
			cls: 'noteBtn', // change this in app.css .x-button.noteBtn.x-button-normal 
			handler: this.noteButtonTap,
			style: 'margin: auto;',
			//pack: 'center',
			//align: 'stretch',
			//width: 320,
//			badgeText: '3',
			width: 130,
			scope: this
		});
		
		this.notePanel = new Ext.Panel({
			scroll: false,
            fullscreen: false,
            dock: 'bottom',
            //style: 'margin: auto',
			//align: 'stretch',
			width:320,
			cls: 'notebar', // change this in app.css x-panel.notebar
			items: [
			        this.noteButton, 
			        ],
		});
		
		this.dockedItems = [this.toolbar, 
		                    this.notePanel,
		                    ];
		
		Ext.regModel('NoteModel', {
			fields: [
				{name: 'id', type: 'int'},
				{name: 'uid', type: 'int'},
				{name: 'thread_id', type: 'int'},
				{name: 'type', type: 'string'},
				{name: 'text', type: 'string'},
				{name: 'read', type: 'string'},
			]
		});
		
		this.noteStore = new Ext.data.JsonStore({
			model : 'NoteModel',
//			sorters: 'read',
//			getGroupString: function(record){
//				record.get('read');
//			}
			/*
			data: [
				{id: 1, uid: 4, thread_id: 62, type: 'replied', text: 'help me', read: 'unread'},
				{id: 1, uid: 4, thread_id: 62, type: 'replied', text: 'help me', read: 'unread'},
			],*/
		});
			
		this.list = new Ext.List({
			itemTpl : "<div><img height='33' width='33' src='images/{read}.png' style='margin-right: 0.7em; float: left'><div style='font-size: small; width: 280;' class='note_{read}'>{text}</div></div>",
			store: this.noteStore,
			scroll: true,
			//grouped: true,
			fullscreen: true,
			listeners:{
				itemTap: function(dv, index, item, evt){
					var type = FlyTalk.views.NotificationView.noteStore.getAt(index).data.type;
					//var id = FlyTalk.views.NotificationView.noteStore.getAt(index).data.id;
					var thread = FlyTalk.views.NotificationView.noteStore.getAt(index).data.thread_id;
					//alert('work in progress');
					
					if(type == 'announced' || type == 'replied'){ // go to reply
						//alert('clicked on announced or replied. work in progress...');
						FlyTalk.views.TalkView.tweetToolbar.title = "note";
						Ext.dispatch({
				            controller: FlyTalk.controllers.dbController,
				            action: 'openThread',
				            index: thread,
				        });
					}else if(type == 'help'){ // go to help
						Ext.dispatch({
				            controller: FlyTalk.controllers.ftController,
				            action: 'openHelp',
				        });
					}else if(type == 'commented'){ // go to help
						Ext.dispatch({
				            controller: FlyTalk.controllers.ftController,
				            action: 'openService'
				        });
					}else if(type == 'reviewed'){ // open review
						//alert('clicked on announced or replied. work in progress...');
					}	
				},
			}			
		});

		this.items = [this.list];
		
		FlyTalk.views.NotificationView.superclass.initComponent.call(this);
        
    },
    
    backButtonTap: function () {
        Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'openHome'
        });
    },
    
    noteButtonTap: function () {
    	FlyTalk.views.HomeView.noteButton.setBadge("");
    	FlyTalk.views.mainView.setActiveItem(FlyTalk.views.HomeView, {type: 'slide', direction: 'down'});
    },

});